<template>
    <div :class="`tech-order-detail ${mode}`">
        <OrderStatusInfo :statusInfo="statusInfo" :orderInfo="orderDetail" @orderCancel="cancelAction" @orderRefund="refundOrder" />
        <SelfPickUpInfo v-if="statusInfo.isPickUp && isShowPickUpInfo" :name="orderDetail.warehouse_name"
            :info="orderDetail.pick_up_info" :bookTime="orderDetail.booking_valid_time" :theme="theme" :styleMode="styleMode" />
        <AddressInfo v-if="statusInfo.isExpress || statusInfo.isDayExpress" :info="orderDetail.address_info" />
        <DayExpressInfo v-if="statusInfo.isDayExpress && orderDetail.booking_valid_time" :day="orderDetail.booking_valid_time" />
        <TechPanel :title="orderDetail.warehouse_name" no-padding :isBold="true">
            <OrderDetailGoodsItem
                v-for="(item, index) in orderDetail.details"
                :key="index"
                :itemInfo="item"
                :isHaveAfterSale="statusInfo.isHaveAfterSale"
                @afterSale="dealAfterSale"
            />
            <OrderDiscount :discountList="orderDetail.discounts" :deliveryPrice="orderDetail.delivery_fee / 100" />
            <OrderTotalPrice label="合计" :isHaveBorder="true" :discountPrice="orderDetail.discount / 100" :totalPrice="orderDetail.trans / 100" />
        </TechPanel>
        <OrderBaseInfo :info="orderDetail" />
        <!-- <ContactService :mode="mode" :styleMode="styleMode" /> -->
        <OrderDetailActionBar
            v-if="statusInfo.isHaveActionBar"
            :statusInfo="statusInfo"
            :price="orderDetail.trans / 100"
            :discountPrice="orderDetail.discount"
            @receivi="receiviOrder"
            @pay="payAction"
        />
        <!-- 组合单提示 -->
        <UniteOrderTip ref="tip" :uniteOrderInfo="uniteOrderInfo" @cancel="handleCancelOrder" @pay="handlePayOrder" :isCancel="isCancel" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { TechPanel, TechDialog } from '@components/base';
import OrderStatusInfo from './orderDetail/OrderStatusInfo';
import AddressInfo from './orderDetail/AddressInfo';
import SelfPickUpInfo from './orderDetail/SelfPickUpInfo';
import DayExpressInfo from './orderDetail/DayExpressInfo';
import OrderDetailGoodsItem from './orderDetail/OrderDetailGoodsItem';
import OrderDiscount from './orderDetail/OrderDiscount';
import OrderBaseInfo from './orderDetail/OrderBaseInfo';
import ContactService from './orderDetail/ContactService';
import OrderDetailActionBar from './orderDetail/OrderDetailActionBar';
import OrderTotalPrice from './orderDetail/OrderTotalPrice';
import UniteOrderTip from './components/UniteOrderTip';
import ShopPayType from './components/ShopPayType';

import { PageMixin } from '@common/mixin';
import { getShopOrderTipInfo } from '@biztools/shopOrder';
import { setTitle, compareTime, redirectTo, isEmptyObject } from '@common/utils';
import { ORDER_PAY_TYPE } from '@constants/pay';
import logger from '@common/logger';
import { ClearTip, TipError, TipLoading, TipSuccess } from '@common/tip';

export default {
    name: 'OrderDetail', // 订单详情
    mixins: [PageMixin],
    components: {
        TechPanel,
        TechDialog,
        OrderTotalPrice,
        OrderStatusInfo,
        AddressInfo,
        SelfPickUpInfo,
        DayExpressInfo,
        OrderDetailGoodsItem,
        OrderDiscount,
        OrderBaseInfo,
        ContactService,
        OrderDetailActionBar,
        UniteOrderTip,
        ShopPayType,
    },
    data() {
        return {
            uniteOrderInfo: {},
            isCancel: false,
        };
    },
    computed: {
        ...mapState({
            orderDetail: state => state.orderDetail.orderDetail,
        }),
        statusInfo() {
            logger.info('订单状态处理结果 ==> ', getShopOrderTipInfo(this.orderDetail || {}));
            return getShopOrderTipInfo(this.orderDetail || {});
        },
        isShowPickUpInfo() {
            const { pick_up_info={} } = this.orderDetail;
            return !isEmptyObject(pick_up_info);
        },
    },
    async created() {
        setTitle('订单详情');
        TipLoading('加载中...');
        const { orderNumber } = this.$route.params;
        logger.info('OrderDetail => 订单号为：', orderNumber);
        await this.getOrderDetail(orderNumber);
        // 获取用户信息
        // await this.getShopMemberInfo();
        ClearTip();
    },
    methods: {
        ...mapActions([
            'getOrderDetail',
            'confirmOrder',
            'getOrderAbstract',
            'cancelUniteOrderInDetail',
            'repayOrder',
            'setAfterSaleGoodsInfo', // 设置售后
            'setAfterSaleOrderInfo', // 设置售后订单信息
        ]),
        // 处理售后事件
        dealAfterSale(info) {
            const { refund_deadline } = this.orderDetail;
            if (!refund_deadline || compareTime(refund_deadline)) {
                // 执行跳转售后页
                this.setAfterSaleOrderInfo(this.orderDetail);
                this.setAfterSaleGoodsInfo(info);
                this.$router.push('/shop-order/after-sale/select-type-item');
            } else {
                this.$refs.afterSale.show();
            }
        },
        // 整单申请退款
        refundOrder() {
            // 跳转到申请取消页面-整单
            this.setAfterSaleOrderInfo(this.orderDetail);
            logger.warn('跳转到申请整单取消');
            redirectTo('shop-order/cancel');
        },
        // 确认收货
        async receiviOrder() {
            const { orderNumber } = this.$route.params;
            const flag = await this.confirmOrder(orderNumber);
            flag ? TipSuccess('确认成功！') : TipError('确认失败，请重试！');
        },
        async showTipAction(isCancel=false) {
            const info = await this.getOrderAbstract(this.orderDetail.request_id);
            this.uniteOrderInfo = info;
            this.isCancel = isCancel;
            this.$refs.tip.show();
        },
        // 取消订单
        async cancelAction() {
            logger.warn('商城订单明细中取消订单');
            await this.showTipAction(true);
        },
        // 订单支付
        async payAction() {
            await this.showTipAction(false);
        },
        // 取消订单
        async handleCancelOrder() {
            const { orderNumber } = this.$route.params;
            await this.cancelUniteOrderInDetail({
                requestId: this.orderDetail.request_id,
                orderNumber,
            });
        },
        // 支付订单
        async handlePayOrder() {
            logger.info('商城订单支付');
            const paytype = this.uniteOrderInfo.pay_method;
            await this.repayOrder({
                requestId: this.orderDetail.request_id,
                isCardPay: paytype == ORDER_PAY_TYPE.card,
                orderNumber: this.orderDetail.order_number,
            });
        },
    },
};
</script>

<style lang="less">
.tech-order-detail {
    .mode-white();
    .p-v(@shop-gap-md);
    .p-b(80);
    &.white {
        background-color: @shop-bg-color;
    }
    &.black {
        background-color: #000000;
    }
}
</style>
